import { defineComponent } from "friendly-petite-vue"


export default defineComponent((props) => ({
    template: `
    <div>{{$store}}</div>
    <div>{{sum()}}</div>
    <label v-for="item in items" v-key="item.value">
        {{item.text}}
        <input type="checkbox" :value="item.value" v-model="$store"/>
    </label>
    <button type="button" @click="handleClick">click</button>
    <button type="button" @click="handleClick2">click2</button>
    `,
    data() {
        return {
            items: (<{[name:string]: any}>props).items,
            tt: []
        }
    },
    methods: {
        sum(): number {
            return this.$store.reduce((acc, i) => acc + i, 0)
        },
        handleClick() {
            console.log('hi')
            this.items.push({value: 321})
        },
        handleClick2() {
            console.log('his')
            this.tt.push({value: 321})
        }

    }
}))
